<template>
 <div class="mineContainer">
    <HeaderBar title="我的"/>
    <LoginPop ref="loginPop" @onLoginSuccess="onOnLoginSuccess"/>
    <div class="userHeaderInfo" @click.prevent="openLogin">
      <img class="userAvatar" :src="userAvatar"/>
      <div class="userName">{{ userInfo?'您好，'+userInfo.Name:'请点击登录' }}</div>
    </div>
    <div class="mineMenu">
      <div class="mineMenuList" v-for="(item,index) in menus" :key="index" @click.prevent="onItemClick(item)">
        <img class="mineMenuIcon" :src="item.icon" style="object-fit: contain;"/>
        <div class="mineMenuTitle">{{ item.title }}</div>
        <a-icon type="right" style="color: lightgray;margin-right: 10px;"/>
      </div>
    </div>
  </div>
</template>
<script>
import HeaderBar from '@/components/Header.vue'
import LoginPop from '@/components/popup/LoginPop.vue';
import {getUserInfo} from '@/api/user.js'
  export default {
    name: 'MineView',
    components:{
      HeaderBar,
      LoginPop
    },
    data(){
      return{
        userInfo:null,
        userAvatar:require('@/assets/images/demoavatar.png'),
        menus:[
          {
            title:'我的订单',
            icon:require('@/assets/images/iconfont-dingdan.png'),
            path:'/order'
          },
          {
            title:'退款/售后',
            icon:require('@/assets/images/yinyu-wenti.png'),
            path:'/services'
          },
          {
            title:'收货地址',
            icon:require('@/assets/images/iconfont-shouhuodizhi.png'),
            path:'/address'
          },
          {
            title:'关于我们',
            icon:require('@/assets/images/aboutus.png'),
            path:'/about'
          }
        ]
      }
    },
    mounted(){
      this.getUserInfo();
    },
    methods:{
      onItemClick(item){
        //console.log('点击了菜单',item);
        if(item.path === '/order'){
          if(localStorage.getItem('userToken')){
            this.$router.push(item.path);
          }else{
            this.$refs.loginPop.open();
          }
          
        }else if(item.path === '/about'){
          this.$router.push(item.path);
        }else{
          this.$message.info('功能开发中');
        }
        
      },
      onOnLoginSuccess(){
        //console.log('登录成功');
        this.getUserInfo();
      },
      openLogin(){
        this.$refs.loginPop.open();
      },
      getUserInfo(){
        if(!localStorage.getItem('userToken')){
          this.$refs.loginPop.open();
          return;
        }
        getUserInfo().then(res=>{
          //console.log('获取用户信息1',res);
          if(res.Code == 200){
             this.userInfo = res.Data;
            localStorage.setItem('userInfo',JSON.stringify(res.Data));
          }else{
            localStorage.removeItem('userInfo')
          }
         
        })
        // getUserInfoDetail().then(res=>{
        //   console.log('获取用户详情2',res);
        // })
      }
    }
  }
</script>
<style scoped>
.mineContainer{
    background-color: #950000;
    height: 90%;
    width: 100vw;
    display: flex;
    flex-direction: column;
}
.mineMenuList{
  display: flex;
  /* justify-content: center; */
  align-items: center;
  padding-left: 10px;
  height: 80px;
  border-bottom: 1px solid #f2f2f2;
  font-size: 16px;
}
.mineMenu{
  flex: 1;
  background-color: white;
}
.userHeaderInfo{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}
.userAvatar{
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 50%;
  margin-left: 10px;
}
.userName{
  font-size: 16px;
  font-weight: bold;
  color: white;
  margin-left: 10px;
  flex: 1;
  text-align: left;
}
.mineMenuIcon{
  width: 20px;
  height: 20px;
}
.mineMenuTitle{
  line-height: 80px;
  font-size: 16px;
  margin-left: 10px;
  text-align: left;
  flex:1;
}
</style>